<template>
    <div class="swiper-container">
            <div class="swiper-wrapper">
                <slot></slot>
            </div>
    <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
</template>
<script>
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
export default {
  mounted () {
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
      }
    })
  }
}
</script>
<style lang="scss" scoped>
    .swiper-container{
      width: 100%;
      border-bottom: 1px solid #ccc;
    }
    .swiper-slide{
        width: 100%;
    }
    .swiper-slide img{
        width: 100%;
        height: 100%;
    }
    .swiper-pagination{
      width: 40px;
      height: 18px;
      text-align: center;
      background: #666;
      border-radius: .384rem;
      line-height: 18px;
      position: absolute;
      left:80%;
      font-size: 14px;
      color:#fff;
      }
</style>
